<template>
	<view id='wx-login' class="wx-login-modal" :class="[showLoginModal ? 'buy-modal-show':'']">
		<view class="wx-login-con">
			<view class="close" @tap='close'>
				<uni-icons type='closeempty' size="20"></uni-icons>
			</view>
			<view class="title">手机号</view>
			<view class="xieyi-wrap">
				<!-- <view class="line_center" @tap='chooseAg'>
					<uni-icons type='checkbox' :color='isChecked ? "#FF2B4B":"#707070"' size="20"></uni-icons>
				</view> -->
				<view class="xieyi-text">授权并获取当前微信的手机号,用于商品下单</view>
			</view>
			<button class="get-call line_center" open-type='getPhoneNumber' @getphonenumber="getPhoneNumber">
				<uni-icons type='weixin' color='#fff' size="20" style="margin-right: 20rpx;"></uni-icons>
				一键授权手机号
			</button>
			
		</view>
	</view>
</template>

<script>
	const app = getApp()
	export default {
		name:"wx-login",
		props:{
			showLoginModal:Boolean
		},
		data() {
			return {
				isChecked:false,
				code: ''
			};
		},
		methods:{
			chooseAg(){
				this.isChecked = !this.isChecked
			},
			// 获取授权的手机号
			getPhoneNumber(e) {
				let that = this;
				that.code = e.detail
				app.globalRequest({
					api: app.getApi().user.getMobile,
					data:{
						iv: that.code.iv,
						encryptedData: that.code.encryptedData
					},
					method: 'post'
				}).then(res => {
					console.log(res)
					if( res.code == 0 ){
						uni.showToast({
							title: '拒绝授权',
							icon: 'none'
						})
					}else{
						uni.showToast({
							title: '手机号授权成功',
							icon: 'none'
						})
						uni.$emit('phoneNumber',1)
					}
					
				}).catch(err => {
				
				})
			},
			close(){
				this.$emit('close')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wx-login-modal{
		width: 100%;
		box-sizing: border-box;
		background: $dis-con-color;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
	}
	.wx-login-con{
		padding:30rpx 30rpx 40rpx;
		position: relative;
		.title{
			font-size: 32rpx;
			// font-weight: bold;
		}
		.close{
			position: absolute;
			right: 30rpx;
			top:30rpx;
		}
	}
	.xieyi-wrap {
		margin: 54rpx 0rpx 0;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		.xieyi-text {
			padding-left: 10rpx;
			color:#707070;
		}
	
		text {
			color: #3780F0;
		}
	}
	.get-call {
		width: 100%;
		height: 80rpx;
		background: $dis-font-color;
		border-radius: 10rpx;
		font-size: 29rpx;
		color: #fff;
		margin-top:50rpx;
	}
	.buy-modal-show {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}

</style>